<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>Single page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Blogger Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android  Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,700italic,800,300,300italic,400italic,400,600,600italic'
          rel='stylesheet' type='text/css'>
    <!--Custom-Theme-files-->
    <%--<link href="css/style.css" rel='stylesheet' type='text/css' />--%>
    <script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!--/script-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
            });
        });
    </script>

</head>
<body>
<!--banner-section-->
<div class="banner-section">
    <h3 class="tittle">${news.title} </h3>
    <div class="single">
        <img src="images/3.jpg" class="img-responsive" alt=""/>
        <div class="b-bottom">
            <h5 class="top">${news.user.username}</h5>
            <p class="sub">${news.content}</p>
            ${news.pushtime}&nbsp;&nbsp;<span class="glyphicon glyphicon-eye-open"></span>&nbsp;<span
                id="seecount">${news.seecount}</span> &nbsp;&nbsp;<a class="span_link" id="clickcount"
                                                                     href="javascript:void(0)"><span
                class="glyphicon glyphicon-thumbs-up"></span></a>&nbsp;&nbsp;&nbsp;<span
                id="clickcounts">${news.clickcount}</span>
        </div>
    </div>
    <div class="single-bottom">
        <div class="single-middle">
            <ul class="social-share">
                <li><span>SHARE</span></li><!--分享-->
                <li><a href="#"><i> </i></a></li>
                <li><a href="#"><i class="tin"> </i></a></li>
                <li><a href="#"><i class="message"> </i></a></li>
            </ul>
            <a href="#"><i class="arrow"> </i></a>
            <div class="clearfix"></div>
        </div>
    </div>
    <div id="comments" class="response">
        <h4>评论区</h4><!--分页展示回帖-->
        <form action="ReplyServlet" method="post">
            <inpt type="hidden" name="newsid" value="${news.newsid}"/>
        <img style="width: 2em;height: 2em;border-radius:50%;float:left;" src="images/<%--${loginuser.userpic}--%>co.png" /> <textarea id="replys"  style="font-size: 1.1em;line-height: 2em;border:1px solid grey;width: 600px;height:2em;overflow: auto;resize: none;" placeholder="想对作者说点什么..."></textarea><br/>
        <div id="divhidden" style="width:628px;text-align: right; margin-top:0.5em;display:none;"> <%--style="disply:none;--%><div id="tips" style="display: inline-block;"><%--您还可以输入<span id="fontcounts">200</span>个字符--%></div><input id="doReply" style="background-image: linear-gradient(to top right,blue,red);color: white;" type="submit"  value="发表评论"/></div>
        </form>
</div>
</div>
</body>
</html>
<script type="text/javascript">
    var pageNo;
    var totalPages;
    $(function () {
        $("[class*='glyphicon-thumbs-up']").toggle(function () {
            $.ajax({
                type: "POST",
                url: "AddClickcountServlet",
                data: {newsid:${news.newsid}},
                dataType: "JSON",
                success: function (data) {
                    $("#clickcounts").text(data);
                }
            })
        }, function () {
            $.ajax({
                type: "POST",
                url: "MinusClickcountServlet",
                data: {newsid:${news.newsid}},
                dataType: "JSON",
                success: function (data) {
                    $("#clickcounts").text(data);
                }
            })
        });
        var getReplyList=function(curr){
            $.ajax({
                type:"POST",
                url:"ShowReplyListServlet",
                data:{newsid:${news.newsid},
                      pageIndex:curr==null?1:curr},
                dataType:"JSON",
                success:function(data){
                    if(data.list!=null){
                   $.each(data.list,function (index,obj) {
                      var replyStr="";
                        replyStr+="<div class='media response-info'><div class='media-left response-text-left'>";
                        replyStr+="<a href=''><img class='media-object' style='width:3em;height:3em;border-radius:50%;' src='images/"+obj.answerid.userpic +"' alt=''></a>";
                        replyStr+="<h5><a href=''>"+obj.answerid.username+"</a></h5></div>";
                        replyStr+="<div class='media-body response-text-right'><p>"+obj.rcontent+"</p>";
                        replyStr+="<ul><li>"+obj.replytime+"</li><li><a href='ReplyServelt?id="+obj.rid+"&newsid="+obj.newsid.newsid+"&userid="+obj.answerid.userid+"'>回复</a></li></ul>";
                        replyStr+=" </div><div class='clearfix'></div></div></div><div class='clearfix'></div></div>";
                        $("#comments").append(replyStr);});
                    }else{
                      var  replyStr="";
                        replyStr+="<p>尚未有人添加评论,赶快来抢占沙发吧</p>";
                        $("#comments").append(replyStr);
                    }
                    pageNo=data.pageNo;
                    totalPages=data.totalPages;
                }

            });

        };
        getReplyList();
        $("#replys").focus(function(){
            $("#replys").css({"height":"6em","border-color":"blue"});
            $("#divhidden").css("display","block");
        });
        $("#replys").blur(function(){
            $("#replys").css({"height":"2em","border-color":"gray"});
            $("#divhidden").css("display","none");
        });
        $("#doReply").click(function () {
            getReplyList();
        });
        $("#replys").keyup(function(){
        var commentscounts=$("#replys").val().length;
            $("#tips").text("您还可以输入"+(200-commentscounts)+"个字符").css("color","black");
           /* $("#fontcounts").text(200-commentscounts);*/
        if(commentscounts<200){
          $("#doReply").attr("disabled",false);
        }else{
            $("#tips").text("已超出"+(commentscounts-200)+"个字符").css("color","red");
            $("#doReply").attr("disabled",true);
        }
        });

    });

</script>
